Web Accessibility

Concise Guidelines

1 Words can give them a picture of your awesome website

1.1 If you follow standard website structure, you should be fine here.

1.1.1 Give clear description on page titles, headings, and link anchors.
1.1.2 Meaningful hierarchy: screen readers read websites sequentially and so does search engine bots. Make use of headings and subheadings (<h1>, <h2>, <h3>, and so on) properly throughout the website.
1.1.3 Consistent and logical layout and navigation: make overall structure such menus and header and footer consistent throughout the website.

1.2 Label all non-text elements using Alt tags

1.2.1 Images, audios, video clips, button, icons, charts, tables, frames, and so on
1.2.2 If the logo at header redirects to home page, put a description such as “Link to Home Page of ABC Company” instead of just generic name of the website or domain name.
1.2.3 Put labels on all forms fields with instructions on example formats and how to fix errors.
1.2.4 Describe links so that users know where the links lead to before tapping or clicking on them. Be descriptive. Put more meaningful words than just “click here.”
1.2.5 Videos: Make subtitles and transcripts available online. (preferably below the file)

1.3 Text

1.3.1 Put periods in abbreviations (CIA => C.I.A.).
1.3.2 A link inside a body of text must stand out using at least two of the following markups: underline, bold, italics, color.

2 Make your website nice to all people, from children to elderlies

2.1 Bigger clickable items. (such as bigger buttons)

2.2 Give generous margins on tables and forms.

2.3 Bigger fonts. If possible, text control functionality will be way better so that people can recall the text size to their comfort zone.

2.4 Keep your copy simple

2.5 Color contrast ratio of text should be 4.5:1 against its background to make it reasonably distinguished.

2.6 Utilize color control. Adding a functionality of converting the website text to high contrast and inversion can be inexpensively implemented.

2.7 Include accessibility guide


2.8 Zoom: make the website comfortably browsable even when the texts are increased to 200%.

3 Table: if a table contains a large amount of data, you can do either or both of the following:

3.1 Make an alternative version of the table breaking up into meaningful columns and rows.

3.2 Provide a caption that accurately conveys the data.

4 Same principle applies to files such as PDF, spreadsheets, Word, or PowerPoint

5 Let the users control the website, not the other way around

5.1 No automatic pop-ups unless to provide instructions or assist website users.

5.2 No automatic video or audio play.

5.3 No unexpected changes.

5.4 No blinking or flashing. (gifs, videos, etc.)

5.5 Users should be able to pause on any content that automatically plays, updates or refreshes. (e.g. sports scores, scrolling news)

5.6 Time limits: any content with time limits must be provided with a warning before time expires and the ability to extend the time limit by up to 8x the original limit before the time limit begins.

5.7 Important submission: For websites that require the submission of important personal information such as financial information, credit card number, social security number, users must be able to review and correct the information before finalizing the submission.

6 Users should be able to navigate freely

6.1 Users should be able to use your website with keyboard only, without a mouse or a pointing device.

6.2 A focus indicator box should sow on all links and fields.

6.3 A search function must be provided for, at a minimum, on the homepage. If placed on additional pages, the search function must remain in the same place.

6.4 A sitemap must be provided.

6.5 Language: A default language is set for the website.