Website
Websites play an important part in communication in the urban planning process. Modern technologies enable websites to perform multiple tasks using dynamic functions such as an online forum, crowdsourcing, mapping, stakeholder management, survey, social media integration, and online database filtering.
In the web development world, web accessibility means that people with disabilities can use the website. It is important because:
It is part of an inclusive planning process and helps people with disabilities.
It overlaps with other best practices such as mobile Web design, usability, and search engine optimization (SEO).
It is required by laws in some cases.
This handbook recommends the following two sources for website accessibility information:
W3C Comprehensive Web Accessibility Resources. www.w3.org/WAI/resources
18fAccessibility Guide. https://accessibility.18f.gov/
Images
Alt Text for Images
What It Means
Website images have alternative text which describes the image.
Why It Matters
Alternative text provides information about an image when the website is used by screen reader users or when the image is not loaded due to technical problems. It provides better accessibility to users with visual impairments and users with low-speed internet connections.
What to Do
Point to the image with a mouse. Right-click and choose Inspect from the drop-down menu. A new pane will open and the relevant code will be highlighted. The alt text information for the image can be checked there.
Accessible Graphic
What It Means
Using labels and patterns as well as colors to illustrate the information and to separate data entries.
Why It Matters
Labels and patterns help users with visual impairments better understand the information in the graphics.
Links
Identifiable Links
What It Means
Ensuring links are visually identifiable by different appearances such as underlines, colors, weight (bold), and/or symbols.
Why It Matters
Screen reader users may not read through an entire page. They may move from link to link. It provides better accessibility to general users as well as users with visual impairments.
What to Do
Evaluate the content and ensure links are visually distinguishable.
Descriptive Links
What It Means
Text links should be descriptive, including the actual content. For example, A text link like Download the Plan in PDF is better than a text link like Click Here to Download.
Why It Matters
The screen reader may jump to a specific link, but a link with non-descriptive text (i.e. “Click Here”) is meaningless without visual context.
How to Check
Evaluate the content and ensure text links are descriptive.
What To Do (by the site developer)
For example, Instead of using “Learn More”, use “Learn More about Our Goals”. Additionally, using aria-label to give context to screen readers “Learn More <a href="/Goals" aria-label=" Learn More About Our Goals">Learn More</a>"
Text
Use Headings
What It Means
Organize content with headings, such as h1, h2, and h3
Why It Matters
The feature is useful for users with difficulty focusing. In addition, users with a visual impairment may navigate by skipping between headings.
What to Do
Right-click on the text on the page and select Inspect on the pop-up menu. A panel will show on the right side of the screen. Review the code at the top of the Elements section. Code sample:
Proper Contract Ratio
What It Means
The text has a contrast ratio of at least 4.5: 1 with the background. Color contrast passes the WCAG AAA success criterion for mobile screens.
Why It Matters
An optimal contrast ratio can help people with moderately low vision read the text.
What to Do
One way to check the contrast ratio is to use WebAIM Contract Checker Tool at https://webaim.org/resources/contrastchecker/.
Step 1. Identify the Hex ID for the foreground/text color and background color of the text content. If Hex ID is unknown, use color pick tools (https://imagecolorpicker.com/en) to identify the HEX IDs.
Step 2. Input the HEX information to the Foreground Color and the Background Color fields on the WebAIM Contract Checker Tool page.
Step 3. Review the outcome on the page, to ensure it at least pass the WCAG AA standard.
Meaningful Plain Text
What It Means
Pages are understandable with no styles enabled
Why It Matters
Screen reading tools to consume the website content without styles (color and shape used in the design). A clear heading structure and logical reading order help screen reader users understand the content.
What to Do
Use the WAVE Evaluation Tool on wave.webaim.org. Input the website address for evaluation. Turn off the Style, and evaluate the structure. Pay attention to page structure, alternative text for images, and heading orders.
Reading Level
What It Means
Content should be written as clearly and simply as possible. Providing supplemental content or a version at the reading level no advanced than the lower secondary education, when the text requires more advanced reading ability.
Why It Matters
There are people with disabilities, including reading disabilities, even among highly educated users with specialized knowledge of the subject matter. Reading disabilities make it difficult to recognize printed words and associate them with the correct sounds.
What to Do
Use text that uses short, common words and short sentences. Avoid using long sentences and long or unfamiliar words.
Size & Space
What It Means
Line height (line spacing) to at least 1.5 times the font size;
Spacing following paragraphs to at least 2 times the font size;
Letter spacing (tracking) to at least 0.12 times the font size;
Word spacing to at least 0.16 times the font size.
Why It Matters
Increasing space between lines, words, and letters makes it easier for people to read text. Increasing space between lines, words, and letters helps people with dyslexia increase their reading speed. Divided sections help people with cognitive disabilities to better comprehend text content.
Forms
Labels Attributes
What It Means
Each form input has a label that accurately describes its purpose. The <label> HTML element represents a caption for an item in a user interface (on the screen).
Why It Matters
Screen reader users may have difficulty understanding the purpose of an input field when there is no label attribute internally associated with that field. An isolated text above the input field will not be perceived as a label for the input field by screen readers.
How To Check
Right-click the input field on the page and select Inspect on the pop-up menu. A panel will show on the right side of the screen. Review the code at the top of the code information section.
Error Messages
What It Means
Forms have descriptive error explanations close to the invalid input, explaining what is wrong and how to fix it. The message is accessible by screen readers.
Why It Matters
Input errors can cause frustration in user experience. It may impose additional difficulty on people with disabilities. A clear, instructional, and accessible error message can improve user experience.
Behind the Scenes
Page Title
What It Means
A web page has a title tag that accurately describes the page's purpose.
Why It Matters
The title is typically the first content read by screen readers when the page is loaded. It will help people using screen readers better understand the purpose of the page.
What to Do
Right-click anywhere on the page and select Inspect on the pop-up menu. A panel will show on the right side of the screen. Review the code at the top of the Elements section.
Navigation
What It Means
Users can navigate the website by only using a keyboard. Clickable elements on the page are logically ordered, and there are no keyboard traps where the user becomes stuck in a keyboard loop.
Why It Matters
Users may unable to use a mouse and need to use a keyboard to navigate the page.
What to Do
Testing a website only with a keyboard.
To Use a keyboard to navigate a website:
Tab - move to next clickable element
Shift + Tab - move to previous clickable element
Return/Enter - activate an element, such as a link and button
Spacebar - toggle an element's state, such as a checkbox.
Esc - close opened content, a prompt, or cancel current action
Arrows - navigate the viewport down, up, left, or right. Or change the value of an item.
Ctrl L (F6) - focus on the web browser's address bar.
Ctrl + increase the size of web elements
Ctrl - reduce the size of web elements
Visible Focus State
What It Means
All clickable elements have a visible focus state.
Why It Matters
Focus states allow keyboard users to know where the focus is on the page.
What to Do
Click the Tab button and follow the change of status of the clickable elements on the page. An element’s focus state should be visible when the element is active.
Pausable Elements
What It Means
Content that automatically changes, such as carousels and slideshows, can be paused by users.
Why It Matters
Changing elements may be too fast or distracting to some users.
What to Do
Review the carousels or slideshows on the website. Ensure that there is a way to stop the element from changing. Example: https://www.w3.org/WAI/tutorials/carousels/working-example/
Page Access
What It Means
There are multiple ways to find pages on a website, such as HTMP sitemap page, the search function on every page, and a clear and consistent main navigation menu.
Why It Matters
The feature provides a better way to navigate a website, especially for keyboard users and screen reader users
Multimedia
What It Means
Multimedia have alternative ways to be consumed, such as captions and transcripts. Media players are keyboard accessible.
Why It Matters
The feature makes the content more accessible to users with visual or hearing impairments.
Language
What It Means
HTML lang attribute, such as <html lang="en">, is used.
Why It Matters
The language information helps screen readers switch language profiles to provide a better user experience.
What to Do
Right-click anywhere on the page and select Inspect on the pop-up menu. A panel will show on the right side of the screen. Review the code at the top of the code information section. Code sample:
Table
What It Means
Table is properly marked up so that it can be meaningfully translated by screen readers.
Why It Matters
Tables allow users to visually associate data contextually, however, this is difficult for non-sighted users. Properly labeling a table and its elements (rows, columns) makes it more accessible to those users by associating data cells with appropriate headers.
What to Do
Right-click the table and select Inspect on the pop-up menu. A panel will show on the right side of the screen. Review the highlighted code. Code sample:
ARIA Enabled
What It Means
Use ARIA landmarks where applicable.
Why It Matters
Accessible Rich Internet Applications (ARIA) allow assistive technologies to convey appropriate information to people with disabilities, including the purpose and attributes of a web element. It “translates” web elements into information understandable by screen readers.
Others
When a page is enlarged or zoomed in by 200%, content is readable and the page does not visually break.
Avoid links that open a new tab or window. If needed, use text or an icon to indicate that clicking the link will open a new window.
Use aria labels for elements that don’t have a visible label.
Provide format for forms. (i.e date: MM/DD/YYY)
Decorative images are not visible to screen readers.