Ensuring citizens of all abilities have full access to election information is key to enfranchisement and inclusion, which is why Scytl strives to provide platforms that are fully accessible. However, we do not think this should be limited to our clients – we believe all constituents should have access to digital election information regardless of where they live. This elections website accessibility best practices guide will help explain not only what accessibility is, but how to ensure your website is accessible to all through HTML coding, helping your office deliver an empowering online experience to citizens of all abilities.
Accessibility as defined in technology is the design of products, devices, services, or environments for people with disabilities. The concept of accessible design and the practice of accessible development enables both direct access (i.e. unassisted) and indirect access meaning compatibility with a person’s assistive technology, such as computer screen readers.
Accessibility can be viewed as the ability to access and benefit from some system or entity. The concept focuses on enabling access for people with disabilities, or special needs, or enabling access through the use of assistive technology; however, research and development in accessibility brings benefits to everyone.
Ensuring citizens of all abilities have full access to election information is key to enfranchisement and inclusion, which is why Scytl strives to provide platforms that are fully accessible. However, we do not think this should be limited to our clients – we believe all constituents should have access to digital election information regardless of where they live. This elections website accessibility best practices guide will help explain not only what accessibility is, but how to ensure your website is accessible to all through HTML coding, helping your office deliver an empowering online experience to citizens of all abilities.
Accessibility as defined in technology is the design of products, devices, services, or environments for people with disabilities. The concept of accessible design and the practice of accessible development enables both direct access (i.e. unassisted) and indirect access meaning compatibility with a person’s assistive technology, such as computer screen readers.
Accessibility can be viewed as the ability to access and benefit from some system or entity. The concept focuses on enabling access for people with disabilities, or special needs, or enabling access through the use of assistive technology; however, research and development in accessibility brings benefits to everyone.
How to Make Your Website Accessible
How to Make Your Website Accessible
Make sure:
- All elements have start (open) and end (close) tags. For more information, please read the technique H74: Ensuring that opening and closing tags are used according to specification.
- All HTML elements nested correctly.
- Elements do not contain duplicate attributes.
- Element IDs are unique.
- You do not use duplicate tags like:Copy to Clipboard
How to fix HTML with examples:
When editing the contents of your website, we strongly recommend that you validate your HTML code before saving the page using the W3C Markup Validation Service. To do so just wrap your page content code into a basic HTML5 structure (provided below), paste the resulting code into the Validate by Direct Input text area, press the Check button and fix the prompted errors if any.
Basic HTML5 structure:
What to do:
- Use < h1> to < h6> headings to structure and organize content. Be aware that the page title is always < h1> and that it is not allowed to skip heading levels.
Semantic Structure: Regions, Headings, and Lists - Use HTML5 semantic markup to structure content.
Semantic HTML5 Elements Explained - Make sure data cells are associated with header cells inside a table.
HTML table basics
(Pay attention to the When should you NOT use HTML tables? section because this is a very common mistake) - Use HTML markup for ordered and unordered lists.
Web Accessibility – Lists - When adding several [accordion] shortcodes, for example to create a FAQs page, please wrap those accordions into an unstyled list. To do so use the class ‘unstyled-list’ and add an aria-label attribute with a name for the list. See an example below:
What to do:
- Use concise, clear language for headings within a page (e.g. < h1>, < h2>) and form labels.
- A single word can be sufficient if it relays the necessary information.
When using headings and labels, write clearly and descriptively so a user knows what content follows or what form fields are asking for. For example, an effective label for a form that is asking for a first name is “First name”.
As another example, the < h1> heading for an article might be “How To Make a Website Accessible” and an < h2> heading might be “Provide Content Alternatives”.
The key here is that the words are clear and descriptive so a user knows what content to expect or what input a form field is asking for.
Headings and Labels: Understanding SC 2.4.6
Alt text is the practice of adding a secondary means of explaining things like images so that everyone can understand the webpage. Another benefit of alt text is that search engines can even search for it. All non-text content presented to the user has a text alternative that serves the equivalent purpose, except if non-text content is pure decoration, is used only for visual formatting, or is not presented to users. If that is the case, it is implemented in a way that can be ignored by assistive technology.
How to Create Alt Text:
- Add Alt attribute to non decorative images (e.g. from < img class=“alignone size-full wp-image-17”> to < img alt=“Handicap Symbol” class=“alignone size-full wp-image-17”>).
- Add an empty alt attribute to decorative images (e.g. from < img class=“separator”> to < img alt=”” class=“separator”>).
What to do:
- Make sure you do not have any images of only text.
- Avoid images that include text that conveys information if at all possible.
- Graphs, screenshots, and diagrams which convey important information of more than just text are probably okay as images.
- If you do have an image that includes text, add Alt text and potentially a caption or description.
How to add prerecorded closed captions:
When adding a new video, create a tts file with closed captions except when the media is actually a media alternative for text and is clearly labeled as such. For further information please visit: WebVTT: The Web Video Text Tracks
What to do:
- Be deliberate and purposeful when writing instructions on your website.
- Attempt to include a text reference (e.g. “subscribe button”) with every set of instructions.
- Remember that some people will not:
- Be able to tell what shape an object is.
- Be able to perceive an object is positioned.
- Be able to hear an audible indicator.
Here are some good and bad examples of sensory instructions.
Bad examples:
- Click on the button to your right to go to the next page.
- You can search for additional information using the search bar at the bottom.
- Click on the rectangle button to subscribe.
Good examples:
- Click on the green button labeled “next page” slightly below and to the right of this text.
- Use the rectangle search bar on the bottom left of this page inside the footer area to search for additional information.
- Click on the blue rectangle button marked “subscribe” directly below this line to subscribe.
Make sure the permalink is equal to the page title when possible:
Page Titled: Understanding SC 2.4.2
What to do:
- Use obvious link anchor text (anchor text are the words you attach a link to).
- Avoid long URL and “click here” and “learn more” general type of links.
- Try to use mostly keywords (vs. fluffy words like “click here”) when creating links.
- Be especially cognizant of creating useful Alt text when linking images.
What to do:
- Use HTML markup to indicate a language change when you switch to words or phrases that are meant to be read in another language.
How to set language of a paragraph
How to set language of a link
What to do:
- Add text as an alternative way to indicate the same information.
- Use highlighting on form fields to indicate that a required field had been left blank.
- Large text (18 point or 14 point bold) need only be 3:1.
- Logos or brand names don’t have a requirement.
What to do:
-
- Make sure all your website text to background meets a 4.5:1 color contrast ratio
Contrast (Minimum): Understanding SC 1.4.3 - To check and fix the contrast ratio, you can use a tool like ‘Colour Contrast Analyser’:
Colour Contrast Analyser (CCA)
- Make sure all your website text to background meets a 4.5:1 color contrast ratio
- Our office loves Scytl ENR because it saves us time and work. The system is so easy to use, and the team – especially Maria – is a joy to work with and helps take some of the election stress off my plate. Before this, the room would be full of people on Election Night, and now nobody comes in. Everybody sits at home and watches the results come in.
- I want to thank Scytl for their support during the 2016 Election. It has been great to work with you. We were all extremely pleased with Scytl Election Night Reporting...I know that it contributed to the overall positive perception of how our election processes and services were experienced.
- We are pleased with Scytl Voter Education, an end-to-end public communications website that is manageable through a web-based content management system. The overall solution delivery was successful, and as a result, I would recommend Scytl as a potential partner for other entities considering projects of this kind.
- Scytl worked with us to develop a training curriculum unique to our processes and procedures. Now we are able to provide a consistent user experience and training for all workers...The overall delivery and performance has been very successful. We highly recommend Scytl for any such project in the future.
- Our previous Election Night Reporting (ENR) was unavailable and we had just 3 weeks to come to a solution. Scytl stepped up to the plate and had us up and running in time for the election. Not only that, our ENR has never looked better. The technology and support were unexpected.
How to Make Your
Website Accessible
How to Make Your
Website Accessible
Make sure:
- All elements have start (open) and end (close) tags. For more information, please read the technique H74: Ensuring that opening and closing tags are used according to specification.
- All HTML elements nested correctly.
- Elements do not contain duplicate attributes.
- Element IDs are unique.
- You do not use duplicate tags like:Copy to Clipboard
How to fix HTML with examples:
When editing the contents of your website, we strongly recommend that you validate your HTML code before saving the page using the W3C Markup Validation Service. To do so just wrap your page content code into a basic HTML5 structure (provided below), paste the resulting code into the Validate by Direct Input text area, press the Check button and fix the prompted errors if any.
Basic HTML5 structure:
What to do:
- Use < h1> to < h6> headings to structure and organize content. Be aware that the page title is always < h1> and that it is not allowed to skip heading levels.
Semantic Structure: Regions, Headings, and Lists - Use HTML5 semantic markup to structure content.
Semantic HTML5 Elements Explained - Make sure data cells are associated with header cells inside a table.
HTML table basics
(Pay attention to the When should you NOT use HTML tables? section because this is a very common mistake). - Use HTML markup for ordered and unordered lists.
Web Accessibility – Lists - When adding several [accordion] shortcodes, for example to create a FAQs page, please wrap those accordions into a, unstyled list. To do so use the class ‘unstyled-list’ and add an aria-label attribute with a name for the list. See an example below:
What to do:
- Use concise, clear language for headings within a page (e.g. < h1>, < h2>) and form labels.
- A single word can be sufficient if it relays the necessary information.
When using headings and labels, write clearly and descriptively so a user knows what content follows or what form fields are asking for.
For example, an effective label for a form that is asking for a first name is “First name”.
As another example, the < h1> heading for an article might be “How To Make a Website Accessible” and an < h2> heading might be “Provide Content Alternatives”.
The key here is that the words are clear and descriptive so a user knows what content to expect or what input a form field is asking for.
Headings and Labels: Understanding SC 2.4.6
Alt text is the practice of adding a secondary means of explaining things like images so that everyone can understand the webpage. Another benefit of alt text is that search engines can even search for it. All non-text content presented to the user has a text alternative that serves the equivalent purpose, except if non-text content is pure decoration, is used only for visual formatting, or is not presented to users. If that is the case, it is implemented in a way that can be ignored by assistive technology.
How to Create Alt Text:
- Add Alt attribute to non decorative images (e.g. from < img class=“alignone size-full wp-image-17”> to < img alt=“Handicap Symbol” class=“alignone size-full wp-image-17”>).
- Add an empty alt attribute to decorative images (e.g. from < img class=“separator”> to < img alt=”” class=“separator”>).
What to do:
- Make sure you do not have any images of only text.
- Avoid images that include text that conveys information if at all possible.
- Graphs, screenshots, and diagrams which convey important information of more than just text are probably okay as images.
- If you do have an image that includes text, add Alt text and potentially a caption or description.
How to add prerecorded closed captions:
When adding a new video, create a tts file with closed captions except when the media is actually a media alternative for text and is clearly labeled as such. For further information please visit: WebVTT: The Web Video Text Tracks
What to do:
- Be deliberate and purposeful when writing instructions on your website.
- Attempt to include a text reference (e.g. “subscribe button”) with every set of instructions.
- Remember that some people will not:
- Be able to tell what shape an object is.
- Be able to perceive an object is positioned.
- Be able to hear an audible indicator.
Here are some good and bad examples of sensory instructions.
Bad examples:
- Click on the button to your right to go to the next page.
- You can search for additional information using the search bar at the bottom.
- Click on the rectangle button to subscribe.
Good examples:
- Click on the green button labeled “next page” slightly below and to the right of this text.
- Use the rectangle search bar on the bottom left of this page inside the footer area to search for additional information.
- Click on the blue rectangle button marked “subscribe” directly below this line to subscribe.
Make sure the permalink is equal to the page title when possible:
Page Titled: Understanding SC 2.4.2
What to do:
- Use obvious link anchor text (anchor text are the words you attach a link to).
- Avoid long URL and “click here” and “learn more” general type of links.
- Try to use mostly keywords (vs. fluffy words like “click here”) when creating links.
- Be especially cognizant of creating useful Alt text when linking images.
What to do:
- Use HTML markup to indicate a language change when you switch to words or phrases that are meant to be read in another language.
How to set language of a paragraph
How to set language of a link
What to do:
- Add text as an alternative way to indicate the same information.
- Use highlighting on form fields to indicate that a required field had been left blank.
- Large text (18 point or 14 point bold) need only be 3:1.
- Logos or brand names do not have a requirement.
What to do:
- Make sure all your website text to background meets a 4.5:1 color contrast ratio
Contrast (Minimum): Understanding SC 1.4.3
To check and fix the contrast ratio, you can use a tool like ‘Colour Contrast Analyser’:
Colour Contrast Analyser (CCA)
Combine Scytl Voter Education and Election Night Reporting for accurate and easy to update communication with constituents before, during, and after elections. Learn more about Voter Education.