Skip to content

508 Compliance (Accessibility) #130

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
iamanissa wants to merge 30 commits into
base: master
Choose a base branch
from
Open

508 Compliance (Accessibility) #130

iamanissa wants to merge 30 commits into from

Conversation

@iamanissa
Copy link

@iamanissa iamanissa commented May 22, 2019

This makes the modal accessible to people with disabilities.

What is 508 Compliance?
Section 508, is an amendment to the United States Workforce Rehabilitation Act of 1973, is a federal law mandating that all electronic and information technology developed, procured, maintained, or used by the federal government be accessible to people with disabilities. 508 Compliance, therefore, involves developing a website that can be used by people with limited vision or blindness, deafness, seizure disorders, and other disabilities.

What issues were fixed?

  1. The visual focus does not remain within the modal dialog box until closed.
    • Trapped focus within modal using javascript
  2. “Every x days text box” needs markup to associate it to its complete instructions and cues.
    • Added aria-label to input box for each frequency dropdown item.
  3. The contrast ratio is less than 4.5:1 for content background and foreground colors.
    • When selecting Weekly days, Monthly Day of Month, and Monthly Day of Week links, the color wasn’t dark enough so I changed the color from #89a to #64717F
  4. Weekly and Monthly day links do not have a unique and meaningful description.
    • Added aria-labels to each a tag
  5. Monthly Days of Month and Monthly Days of Week cannot be accessed or activated by keyboard.
    • When selecting Weekly days, Monthly Day of Month, and Monthly Day of Week, each a tag needed an href in order to be tabbable.

iamanissa and others added 22 commits May 17, 2019 12:38
@iamanissa
Add title attribute to the Every 'foo' input
98e706e
@iamanissa
Fix 508 contrast error: change #89a to #64717F
2e5f001
@iamanissa
Change header from h1 to h4 as h1 doesn't logically flow with page
3b9bb27
@iamanissa
Abbreviated weekdays not suffient error: Add aria-label with days spe…
3429212 
…lled out to weekly <a href>'s
@iamanissa
Merge pull request #1 from SuperJones/508_html_fix
a170fd0 
508 html fix
Add javascript/coffeescript to make modal focusable
11b6efb
First part of trapping focus in modal (address bar is still an issue)
479581e
Add class and empty href to a tags so that they become tabbable
eca085b
Add href and title to a tags in monthly:day of the week table
f290c3d
Add methods for adding st,nd,rd,th & drying up full unabbreviated wee…
3fe1732 
…kday
Add aria-label to monthly:day of month links
7b1e428
Move html id one div down
a6a97b1
Use more concise method
c0fda9d
Remove duplicate methods in wrong file
5207802
Comment out lines that might not be used
93eb5c8
Change h1 to an h4 & remove font-size
7fd81ba
Change h1 to h4 in cancel method & move css id to first modal div
7d29335
Remove no longer needed commented out lines
74d652e
@iamanissa
Merge pull request #2 from SuperJones/508_trap_focus
7d67700 
508 trap focus
@iamanissa
Give x button an id and background color
b06756f
@iamanissa
Up the color contrast to higher that 4:5:1 for weekday letter & numbe…
0b2a673 
…r highlights
@iamanissa
Merge pull request #3 from SuperJones/508_color_contrast
ba7cbcc 
508 color contrast
@iamanissa iamanissa closed this Jul 15, 2019
@iamanissa iamanissa reopened this Jul 15, 2019
@iamanissa
Copy link
Author

iamanissa commented Jul 15, 2019

Didn't mean to close this PR, I'm new to Forking and all that. I only meant to merge an update to my own Fork.
I still need this PR to be reviewed and merged. I am using my Forked version at work.

saturnflyer referenced this pull request in saturnflyer/ice_cube_select May 31, 2022
@saturnflyer
Add 508 compatability from @iamanissa
9681c66 
https://github.com/GetJobber/recurring_select/pull/130
saturnflyer added a commit to saturnflyer/ice_cube_select that referenced this pull request Jan 18, 2026
@saturnflyer @iamanissa
Add Section 508 accessibility compliance for weekly day selection
238e8fd 
This commit completes the 508 accessibility compliance work by adding
aria-labels to weekly day selection buttons, providing full weekday names
for screen readers. This builds upon existing accessibility features that
were previously ported from the original recurring_select project:

- Focus trapping within modal dialog
- Aria-labels for calendar day/month links
- Enhanced color contrast ratios (WCAG compliant)
- Title attributes on interval inputs
- Keyboard-accessible links with href attributes

Credit to @iamanissa for the original 508 compliance work in
gregschmit/recurring_select PR gregschmit#130.

Co-Authored-By: iamanissa <iamanissa@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@iamanissa