Skip to content
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

Add ARIA labels to TO DO page - Vue #252

Closed
wants to merge 0 commits into from
Closed

Add ARIA labels to TO DO page - Vue #252

wants to merge 0 commits into from

Conversation

29deepanshutyagi
Copy link
Contributor

@29deepanshutyagi 29deepanshutyagi commented Oct 10, 2024 •
edited
Loading

This PR improves the accessibility of the To-Do page in the Vue.js DWA starter by adding ARIA labels, enhancing keyboard accessibility, and ensuring compatibility with screen readers. The changes align with the goal of making the DWA more usable for individuals relying on assistive technologies.
Key Changes:

ARIA Labels:
    Added aria-label and aria-live attributes to key interactive elements (task list, input field, checkboxes, buttons) to ensure they are descriptive and accessible to screen readers.

Keyboard Accessibility:
    Ensured all buttons, checkboxes, and form inputs are focusable and accessible via keyboard navigation.
    Enhanced focus styles for better visual clarity during navigation.

Task Management:
    Users can add, edit, complete, and delete tasks. When editing, the input field is pre-filled with the task title, and the button dynamically updates to reflect "Save Task."

Screen Reader Compatibility:
    Tested the page with screen readers to ensure that all interactive elements and task-related actions are announced appropriately, improving the overall user experience for assistive technology users.
    
    
    issue #73

@blackgirlbytes blackgirlbytes linked an issue Oct 10, 2024 that may be closed by this pull request
Add ARIA labels to TO DO page - Vue #73
Open
12 tasks
@blackgirlbytes
Copy link
Contributor

hmm @29deepanshutyagi let's get #199 merged in first before you add any ARIA labels. there's a specific way that we want the to do list component to look! Thanks for the initial attempt though.

@29deepanshutyagi
Copy link
Contributor Author

29deepanshutyagi commented Oct 10, 2024 •
edited
Loading

ok i understood ,so this pr will not be merged??

@blackgirlbytes
Copy link
Contributor

@29deepanshutyagi it will not be merged. have you taken a look at the other PR? it has a lot of detail and components in it

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@finn-block finn-block Awaiting requested review from finn-block

@angiejones angiejones Awaiting requested review from angiejones

@blackgirlbytes blackgirlbytes Awaiting requested review from blackgirlbytes

@acekyd acekyd Awaiting requested review from acekyd

@EbonyLouis EbonyLouis Awaiting requested review from EbonyLouis

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Add ARIA labels to TO DO page - Vue
2 participants
@29deepanshutyagi @blackgirlbytes