hackforla / hackforla/website

Research impact of techniques in the WCAG 1.4.4. Guideline for resizing text

Open
#4,227 33 comments 0 reactions 0 assignees View on GitHub
Complexity: Medium Dependency Feature: Accessibility role: front end size: 2pt
Dominant language
JavaScript
Stars
363
Forks
872
Avg merge
2d 21h
Merged PRs (30d)
18

Description

### Dependency
- [ ] After #1347 is closed, review this issue to see if it needs rewriting or closing. See comments

### Overview
Research the feasibility and impact of implementing alternative Accessibility techniques, so that Hack for LA's website can score the highest Accessibility rating possible, while still being easy to use for all visitors.

### Details
Zoom functionality in modern browsers ensures that the WCAG 1.4.4 guideline on resizing text is satisfied, but there are alternative techniques for compliance that offer accessibility advantages. In this issue we will research the feasibility and impact of implementing alternative techniques described in the guideline, in particular: (1) providing accessibility controls on the page, and (2) Specifying relative font sizes and resizing text containers and layout regions to scale with text size

### Action Items

- [ ] Research the impact of implementing:
- [G178: Providing controls on the Web page that allow users to incrementally change the size of all text on the page up to 200 percent](https://www.w3.org/WAI/WCAG21/Techniques/general/G178.html)
- [ ] Research the alternative of ensuring that text containers resize when the text resizes AND using measurements that are relative to other measurements in the content by using one or more of the following techniques:
- [C28: Specifying the size of text containers using em units](https://www.w3.org/WAI/WCAG21/Techniques/css/C28.html)
- Techniques for relative measurements
- [C12: Using percent for font sizes](https://www.w3.org/WAI/WCAG21/Techniques/css/C12.html)
- [C13: Using named font sizes](https://www.w3.org/WAI/WCAG21/Techniques/css/C13.html)
- [C14: Using em units for font sizes](https://www.w3.org/WAI/WCAG21/Techniques/css/C14.html)
- Techniques for text container resizing
- [SCR34: Calculating size and position in a way that scales with text size](https://www.w3.org/WAI/WCAG21/Techniques/client-side-script/SCR34.html)
- [G146: Using liquid layout](https://www.w3.org/WAI/WCAG21/Techniques/general/G146.html)
- [ ] Document findings in a Decision Record.

### Resources/Instructions
- [W3C Web Content Accessibility Guidelines (WCAG) 2.0](https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast)
- [Understanding Success Criteria 1.4.4: Resize Text](https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html)
- [Sufficient techniques for WCAG 1.4.4](https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0&showtechniques=144#qr-visual-audio-contrast-scale)
- [How to change text size in Google Chrome](https://support.google.com/chrome/answer/96810?hl=en&co=GENIE.Platform%3DDesktop)

### Created by this issue
- DRAFT: [Decision Record - Hack for LA Issue #4227](https://docs.google.com/document/d/1CneoiEo4GDFXXWJnaZH56XyYUBGSKnlG2ZiP8L24eiE/edit)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.