https://github.com/merieli/meri-menuacessible-dev
[Front-End] Personal Project - 100% accessible menu component (Under development)
https://github.com/merieli/meri-menuacessible-dev
Last synced: 12 months ago
JSON representation
[Front-End] Personal Project - 100% accessible menu component (Under development)
- Host: GitHub
- URL: https://github.com/merieli/meri-menuacessible-dev
- Owner: Merieli
- Created: 2022-02-27T16:03:19.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-05-09T10:52:51.000Z (about 4 years ago)
- Last Synced: 2025-03-03T08:30:55.343Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 168 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
Accessible Menu Component
This is [breve descrição do projeto]
## ⚡ Built With
This project was developed with the following technologies:
- 
**HTML e CSS**
- 
**JavaScript**
- 
**SASS**
- Design: https://www.figma.com/file/LLkrFHfNYTRXThrVxlJCQe/menu?node-id=0%3A1
## 🗂 How To Use
Requirements
##### To clone and run the project:
- Git
##### To Develop:
- Git
- Sass
#### Starting Development
```
# Iniciar a compilação SASS
gulp
```
### Navigating through the menu
Menu Type [01-0]
Menu Acessivel com interações Vanilla JS Baseado no menu da W3C.
Menu Type [02-0]
Menu Acessivel com interações completas em Vanilla JS Baseado no menu da W3C com semantica correta e facilitada para uso de leitor de tela.
Para usar o menu acessível é preciso seguir a estrutura HTML do menu02.html, com os atributos e data-attributes necessários para cada tipo de item ou subitem do menu. E ao utilizar o script JS deve ser selecionado o data atribute correto para a variavel menubar. No CSS alem do hover sobre os itens do menu que deve exibir o submenu, a classe "active" também deve ativar a visibilidade do submenu.
#### Keyboard Support
| Key | Function |
| :----: | :--- |
| [**Space**] / [**Enter**] | - Abre o submenu e move o foco para o primeiro item no submenu.
- Quando usado no submenu abre o link. |
| [**ESC**] | - Quando o foco esta em um submenu, fecha o submenu.
- Move o foco para o item pai da barra de menus |
| ➡ | - Move o foco para o próximo item na barra de menus.
- Se o foco estiver no último item, move o foco para o primeiro item.
- Se o foco estiver em um item de submenu, abre o próximo submenu e coloca o foco no primeiro item.
- Se o foco estiver em um item que não possui um submenu: Fecha o submenu; Move o foco para o próximo item na barra de menus; Abre o submenu do item da barra de menus recém-focado, mantendo o foco nesse item da barra de menus pai. |
| ⬅ | - Move o foco para o item anterior na barra de menus.
- Se o foco estiver no primeiro item, move o foco para o último item. |
| ⬇ | - Abre o submenu e move o foco para o primeiro item no submenu.
- Quando em um submenu, move o foco para o próximo item.
- Se o foco estiver no último item de um submenu, move o foco para o primeiro item. |
| ⬆ | - Abre o submenu e move o foco para o último item do submenu.
- Quando em um submenu, move o foco para o item anterior.
- Se o foco estiver no primeiro item de um submenu, move o foco para o último item. |
| [**Home**] | Move o foco para o primeiro item na barra de menus/ submenu. |
| [**End**] | Move o foco para o último item na barra de menus/ submenu. |
| [Character 🔡] | - Move o foco para o próximo item na barra de menus/ submenu com um nome que começa com o caractere digitado.
- Se nenhum dos itens tiver um nome começando com o caractere digitado, o foco não se moverá. |
Menu Type [02-1]
Menu Acessivel com interações completas utilizando JS e JQuery Baseado no menu da W3C com semantica correta e facilitada para uso de leitor de tela.
Para usar o menu acessível é preciso seguir a estrutura HTML do menu02.html, com os atributos e data-attributes necessários para cada tipo de item ou subitem do menu. E ao utilizar o script JS deve ser selecionado o data atribute correto para a variavel menubar. No CSS alem do hover sobre os itens do menu que deve exibir o submenu, a classe "active" também deve ativar a visibilidade do submenu.
#### Keyboard Support
| Key | Function |
| :----: | :--- |
| [**Space**] / [**Enter**] | - Abre o submenu e move o foco para o primeiro item no submenu.
- Quando usado no submenu abre o link. |
| [**ESC**] | - Quando o foco esta em um submenu, fecha o submenu.
- Move o foco para o item pai da barra de menus |
| ➡ | - Move o foco para o próximo item na barra de menus.
- Se o foco estiver no último item, move o foco para o primeiro item.
- Se o foco estiver em um item de submenu, abre o próximo submenu e coloca o foco no primeiro item.
- Se o foco estiver em um item que não possui um submenu: Fecha o submenu; Move o foco para o próximo item na barra de menus; Abre o submenu do item da barra de menus recém-focado, mantendo o foco nesse item da barra de menus pai. |
| ⬅ | - Move o foco para o item anterior na barra de menus.
- Se o foco estiver no primeiro item, move o foco para o último item. |
| ⬇ | - Abre o submenu e move o foco para o primeiro item no submenu.
- Quando em um submenu, move o foco para o próximo item.
- Se o foco estiver no último item de um submenu, move o foco para o primeiro item. |
| ⬆ | - Abre o submenu e move o foco para o último item do submenu.
- Quando em um submenu, move o foco para o item anterior.
- Se o foco estiver no primeiro item de um submenu, move o foco para o último item. |
| [**Home**] | Move o foco para o primeiro item na barra de menus/ submenu. |
| [**End**] | Move o foco para o último item na barra de menus/ submenu. |
| [Character 🔡] | - Move o foco para o próximo item na barra de menus/ submenu com um nome que começa com o caractere digitado.
- Se nenhum dos itens tiver um nome começando com o caractere digitado, o foco não se moverá. |
Menu Type [02-2]
Menu Acessivel mais simples utilizando JS e JQuery Baseado no menu da W3C com semantica correta e facilitada para uso de leitor de tela.
Para usar o menu acessível é preciso seguir a estrutura HTML do menu02.html, com os atributos e data-attributes necessários para cada tipo de item ou subitem do menu. E ao utilizar o script JS deve ser selecionado o data atribute correto para a variavel menubar. No CSS alem do hover sobre os itens do menu que deve exibir o submenu, a classe "active" também deve ativar a visibilidade do submenu.
#### Keyboard Support
| Key | Function |
| :----: | :--- |
| [**Space**] / [**Enter**] | - Abre o submenu e move o foco para o primeiro item no submenu.
- Quando usado no submenu abre o link. |
| [**ESC**] | - Quando o foco esta em um submenu, fecha o submenu.
- Move o foco para o item pai da barra de menus |
| ➡ | - Move o foco para o próximo item na barra de menus.
- Se o foco estiver no último item, move o foco para o primeiro item.
- Se o foco estiver em um item de submenu, abre o próximo submenu e coloca o foco no primeiro item.
- Se o foco estiver em um item que não possui um submenu: Fecha o submenu; Move o foco para o próximo item na barra de menus; Abre o submenu do item da barra de menus recém-focado, mantendo o foco nesse item da barra de menus pai. |
| ⬅ | - Move o foco para o item anterior na barra de menus.
- Se o foco estiver no primeiro item, move o foco para o último item. |
| ⬇ | - Abre o submenu e move o foco para o primeiro item no submenu.
- Quando em um submenu, move o foco para o próximo item.
- Se o foco estiver no último item de um submenu, move o foco para o primeiro item. |
| ⬆ | - Abre o submenu e move o foco para o último item do submenu.
- Quando em um submenu, move o foco para o item anterior.
- Se o foco estiver no primeiro item de um submenu, move o foco para o último item. |
| [**Home**] | Move o foco para o primeiro item na barra de menus/ submenu. |
| [**End**] | Move o foco para o último item na barra de menus/ submenu. |
## :octocat: Contributing
This project is for study purposes, so contact me and let me know your ideas.
All kinds of contributions are very welcome and appreciated!
- ⭐️ Star the project
- 🐛 Find and report issues
- 📥 Submit PRs to help solve issues or add features
- ✋ Influence the future of project with feature requests
## 🔖 License
This project is licensed under the MIT License - see the [LICENSE](https://opensource.org/licenses/MIT) page for details.
-------------------------------------
🤍 Made by Merieli Manzano Ⓜ