Embedded Files
Principles of Accessible Design
Principles of Accessible Design
Below you will find a list of some key principles of accessible design. Most can be implemented without compromising the overall look and feel of your website.
Provide equivalent alternative text
Alternative text provides a textual alternative to non-text content in web pages. It is especially helpful for people who are blind and rely on a screen reader to have the content of the website read to them.
Create logical document structure
Headings, lists, and other structural elements provide meaning and structure to web pages. They can also facilitate keyboard navigation within the page.
Provide headers for data tables
Data tables need row and column header cells (<th scope="row"> and <th scope="col">) to programmatically associate them with their corresponding data cells (<td>), making it easier for screen reader users to navigate and understand the table.
Ensure users can complete and submit all forms
Every form element (text field, checkbox, dropdown list, etc.) needs a programmatically-associated label. Users must be able to submit the form and recover from errors.
Write links that make sense out of context
Every link should make sense when read by itself. Screen reader users may choose to read only the links on a web page. Certain phrases like "click here" and "more" must be avoided.
Caption and/or provide transcripts for media
Videos and live audio must have captions and a transcript. With archived audio, a transcription may be enough.
Ensure accessibility of PDF, Word, PowerPoint, and other non-HTML content.
PDF documents and other non-HTML content must be as accessible as possible. If you cannot make it accessible, consider using HTML instead or, at the very least, provide an accessible alternative. PDF documents should also include a series of tags to make it more accessible. A tagged PDF file looks the same, but it is almost always more accessible to a person using a screen reader.
Allow users to skip repetitive elements on the page
Each page should provide a method to skip navigation or other elements that repeat on every page. This is usually accomplished by providing a "Skip to Main Content," or "Skip Navigation" link at the top of the page.
Do not rely on color alone to convey meaning
Color can enhance comprehension but cannot alone convey meaning. That information may not be available to a person who is color blind and will be unavailable to screen reader users.
Make sure content is clearly written and easy to read
Write clearly, use clear fonts, and use headings and lists logically.
Ensure JavaScript event handlers are device independent (e.g., they do not require the use of a mouse).
Design to standards
Valid HTML and CSS promote accessibility by making code more flexible and robust.
This is just an introduction. To learn more, explore our articles and resources.
Page updated
Google Sites
Report abuse