Desenvolvimento Inclusivo
Página Inicial de Juliano Lopes
"Independentemente de qualquer coisa, continue desenvolvendo!"
Olá! Sou analista de sistemas, especialista em acessibilidade e desenvolvedor. Minha missão é democratizar o acesso à tecnologia e mostrar que a programação é para todos.
Especialista Certificado
Minha atuação prática é chancelada pelas maiores e mais respeitadas instituições mundiais de acessibilidade digital:
Web Accessibility Specialist (WAS)
International Association of Accessibility Professionals (IAAP)
Validar Credencial
Sobre Juliano Lopes
Minha jornada no universo do desenvolvimento de software começou de forma autodidata, motivada por uma genuína curiosidade em compreender como os programas de computador funcionavam.
Em 2013, me formei no Curso Técnico em Programação, época na qual iniciei meus primeiros trabalhos como freelancer. Em 2018, concluí a faculdade de Análise e Desenvolvimento de Sistemas.
Posteriormente, integrei equipes multinacionais em uma consultoria global de software, onde atuei como Engenheiro Full Stack utilizando tecnologias como **Java** e **React**. Meu trabalho focou fortemente em acessibilidade, impulsionando a abertura de mercados internacionais para os produtos de nossos clientes, além de melhorar o SEO, qualidade de código e usabilidade das aplicações.
Atualmente, trabalho como **Analista de Acessibilidade no Google**, dedicando meu tempo e conhecimento para garantir que a internet seja um espaço utilizável para todas as pessoas, além de ministrar cursos de tecnologia.
Fora das Linhas de Código
Quando não estou programando ou analisando usabilidade web, com certeza estarei envolvido com minhas outras grandes paixões:
-
Música: Adoro tocar violão, teclado ou flauta doce.
-
Xadrez: Um ótimo desafio intelectual e estratégico.
-
Futebol de 5: Uma vibrante partida com bola de guizo.
-
Leitura e Café: Nada supera ler um excelente livro saboreando um café quentinho.
Cursos Disponíveis
O Curso Desenvolvendo foi idealizado após eu notar que muitas pessoas com deficiência visual enfrentavam as mesmas barreiras no uso e configuração de ferramentas computacionais. Nossos cursos contam com metodologia intensiva, imersiva e focada na prática.
Utilização do leitor de telas NVDA
Aprenda a navegar no computador e na internet de forma produtiva, rápida e autônoma utilizando o melhor e mais popular leitor de telas de código aberto do mundo.
100% Acessível
Aulas gravadas + suporte
HTML acessível, lógica de programação e JavaScript
A base do desenvolvimento de software explicada de forma lógica e acessível. Crie páginas web semânticas e implemente inteligência programática do absoluto zero.
Especialista WAS
Com projetos reais
Programação de Sistemas com PHP e SQL
Entenda como funciona o backend das aplicações. Configure servidores locais, desenvolva lógicas robustas de servidor e modele bancos de dados relacionais eficientes.
Full Stack
Modular e Prático
Iniciando com Git e GitHub
Domine o controle de versão de código. Aprenda a clonar repositórios, gerenciar ramificações (branches), criar commits e colaborar em projetos reais no GitHub de forma acessível.
Versionamento
Essencial para Devs
Curso básico de WordPress
Domine o CMS mais utilizado do planeta. Crie e gerencie portais, blogs e páginas institucionais com facilidade, adaptando recursos sob medida para acessibilidade.
Foco Comercial
Sem código necessário
Ficou interessado nas próximas turmas?
Entre no nosso grupo oficial do WhatsApp para receber avisos de matrículas e interagir diretamente ou preencha o formulário completo de inscrição de interesse.
Recursos & Acessibilidade
Códigos, scripts de automação e extensões de navegadores de minha autoria projetados especificamente para potencializar a autonomia, produtividade e eficiência digital de pessoas cegas ou com baixa visão.
WhatsApp Web Acessível
Selecione o Idioma do Manual / Select Language:
O WhatsApp Web With More Accessibility é um script que fiz para que nós, usuários de leitores de tela, possamos trabalhar com o WhatsApp Web com mais autonomia, praticidade e confiança.
Instalação e Utilização
Para utilização do script, é necessário ter instalada a extensão **Tampermonkey** no seu navegador (Google Chrome, Mozilla Firefox, Opera, Microsoft Edge ou Safari). Após isso, basta acessar o script pelo link oficial e clicar em instalar.
Depois de instalar, ao abrir a página do WhatsApp Web, aguarde o carregamento completo da aplicação e pressione o atalho ALT + S para ativar o script.
Elementos Adicionados no Layout
- Cabeçalho H1 antes da listagem de conversas para navegação rápida de leitor de telas.
- Cabeçalho H2 no início da conversa ativa rotulado "Conversa ativa + NOME DO CONTATO".
- Botões de emojis etiquetados no rodapé, acima da escrita.
- Etiqueta dinâmica de "Gravar mensagem de voz" (campo de escrita vazio) ou "Enviar mensagem de texto" (campo preenchido).
- Botão de "Cancelar gravação" e cronômetro de tempo de gravação de áudio visíveis.
Teclas de Atalho Disponíveis
| Atalho | Função do Comando |
|---|---|
| ALT + S | Ativar / desativar o script acessível |
| ALT + A | Focar opções de anexos na conversa ativa |
| ALT + B | Focar no campo de busca ("Buscar nas conversas...") |
| ALT + C | Colocar o foco na lista de conversas |
| ALT + E | Escrever mensagem na conversa ativa |
| ALT + G | Focar e iniciar gravação de áudio de voz |
| ALT + I | Exibe a versão instalada do script |
| ALT + L | Mudar idioma do script (PT, EN, ES) |
| ALT + M | Focar na listagem de mensagens da conversa ativa |
| ALT + N | Enviar mensagem para número válido (DDI + DDD + número) |
| ALT + T | Falar o título da conversa ativa no leitor |
| 1 (Alfa) | Focar o progresso de áudios (setas avançam/retrocedem) |
| 2 (Alfa) | Aumentar velocidade de reprodução (1.0x, 1.5x, 2.0x) |
| 3 (Alfa) | Ocultar ou exibir o texto original de resposta |
| ALT + Seta Baixo | Ir para próxima conversa e focar escrita |
| ALT + Seta Cima | Ir para conversa anterior e focar escrita |
| ALT + D | Abrir opções de mensagem (favoritar, deletar, baixar) |
*Nota: Caso o NVDA não entre em modo de foco automaticamente ao usar os atalhos, ative-o manualmente pressionando NVDA + Barra de Espaço.
WhatsApp Web With More Accessibility is a script I made so that we, screen reader users, can work with WhatsApp Web with more autonomy, practicality and confidence.
Installation and Usage
To use the script, you must have the **Tampermonkey** extension installed on your browser (Google Chrome, Mozilla Firefox, Opera, Microsoft Edge or Safari). After that, simply access the script and click install.
After installing, when accessing the WhatsApp Web page, wait for the application to load completely and use the shortcut ALT + S to toggle the script.
Added Elements and Labels
- Level 1 header (H1) before the conversation list for faster screen reader navigation.
- Level 2 header (H2) labeled "Active conversation + CONTACT NAME" at the start of the active chat.
- Clearly labeled Emoji buttons above the footer text box.
- Dynamic labels reading "Record voice message" (if the field is empty) or "Send text message" (if filled in).
- "Cancel recording" button and elapsed recording time under the text field.
Available Keyboard Shortcuts
| Shortcut | Command Description |
|---|---|
| ALT + S | Toggle script on and off |
| ALT + A | Focus on options to choose attachment type |
| ALT + B | Focus on search field ("Search in conversations...") |
| ALT + C | Put focus on the conversation list |
| ALT + E | Focus on the message writing field |
| ALT + G | Focus and start recording a voice message |
| ALT + I | Display script version information |
| ALT + L | Select script language (PT, EN, ES) |
| ALT + M | Focus on active chat message list |
| ALT + N | Send message to a valid unsaved WhatsApp number |
| ALT + T | Speak the title of the active conversation |
| 1 (Alfa) | Go to audio playback progress (arrows rewind/forward) |
| 2 (Alfa) | Increase audio playback speed (1.0x, 1.5x, 2.0x) |
| 3 (Alfa) | Hide or display original text of a reply message |
| ALT + Down Arrow | Go to next conversation and focus writing field |
| ALT + Up Arrow | Go to previous conversation and focus writing field |
| ALT + D | Open window options (favorite, delete, download, etc) |
WhatsApp Web Con Más Accesibilidad es un script que hice para que los usuarios de lectores de pantalla podamos trabajar con WhatsApp Web con más autonomía, practicidad y confianza.
Instalación y Uso
Para usar el script, debe tener instalada la extensión **Tampermonkey** en su navegador (Google Chrome, Mozilla Firefox, Opera, Microsoft Edge o Safari). Después, acceda al script por el enlace oficial y haga clic en instalar.
Al acceder a la página de WhatsApp Web, espere a que la aplicação se cargue por completo y use el atajo ALT + S para activar o desactivar el script.
Elementos Añadidos en el Layout
- Encabezado H1 antes de la lista de chats para navegación rápida.
- Encabezado H2 al principio del chat activo rotulado "Conversación activa + NOMBRE DE CONTACTO".
- Botones emoji etiquetados encima del campo de escritura.
- Botón dinámico rotulado como "Grabar mensagem de voz" o "Enviar mensaje de texto".
- Botón de "Cancelar grabación" y cronômetro de grabación debajo del campo de mensaje.
Teclas de Atajos Disponibles
| Atajo | Función del Comando |
|---|---|
| ALT + S | Activa y desactiva el script de accesibilidad |
| ALT + A | Enfocar opciones de archivos adjuntos |
| ALT + B | Enfocar el campo de búsqueda ("Buscar chats...") |
| ALT + C | Poner el foco en la lista de conversaciones |
| ALT + E | Poner el foco en el campo de escritura del mensaje |
| ALT + G | Enfocar y comenzar a grabar mensaje de voz |
| ALT + I | Muestra información de la versión del script |
| ALT + L | Seleccionar idioma del script (PT, EN, ES) |
| ALT + M | Poner el foco en la lista de mensajes de la conversación |
| ALT + N | Enviar mensaje a un número de WhatsApp no guardado |
| ALT + T | Decir el título de la conversación activa |
| 1 (Alfa) | Ir al progreso de audio en reproducción (flechas rebobinan) |
| 2 (Alfa) | Aumentar velocidad de reproducción (1.0x, 1.5x, 2.0x) |
| 3 (Alfa) | Ocultar o mostrar el texto original del mensaje respondido |
| ALT + Flecha Abajo | Ir a la siguiente conversación y enfocar escritura |
| ALT + Flecha Arriba | Ir a la conversación anterior y enfocar escritura |
| ALT + D | Ventana con opciones (favorito, eliminar, reenviar, descargar) |
Extensão Atalhos Acessíveis
Selecione o Idioma do Manual / Select Language:
Com esta extensão, você será capaz de criar atalhos de maneira acessível para focar elementos em uma página web, além de utilizar inteligência artificial para descrever imagens, gerar resumos inteligentes do conteúdo das páginas e tirar dúvidas em tempo real através de um chat interativo.
IMPORTANTE SOBRE A INTELIGÊNCIA ARTIFICIAL: Para utilizar os recursos de IA (Resumos, Descrição de Imagens e Chat), a extensão utiliza o modelo "Traga sua Própria Chave" (BYOK). Isso significa que você poderá inserir sua própria chave de API gratuita do Gemini (gerada facilmente no Google AI Studio). Essa abordagem garante que você tenha sua própria cota de uso exclusiva, sem anúncios, sem limites compartilhados e com total privacidade de dados.
Observação: As combinações de teclas mencionadas como “Control + Alt” referem-se às teclas individuais Control e Alt pressionadas simultaneamente, e não à tecla composta “Ctrl+Alt” (localizada à direita da barra de espaço).
Como usar
Primeiramente instale a extensão Atalhos Acessíveis em seu navegador:
Atalhos Acessíveis para Google Chrome (Abre em nova aba)
Atalhos Acessíveis para Mozilla Firefox (abre em nova aba)
Após a instalação, você poderá utilizar os recursos disponíveis.
Vídeo de demonstração
Menu de Atalhos Acessíveis
Agora, a extensão conta com um menu dedicado chamado "Atalhos Acessíveis", que pode ser acessado clicando com o botão direito do mouse em qualquer lugar da página ou utilizando a tecla "Aplicações" (ou Shift + F10) do seu teclado. Dentro deste menu, você encontrará todas as funcionalidades principais e os atalhos padrão da extensão, o que melhora significativamente o acesso rápido às opções sem a necessidade de memorizar todas as combinações de teclas imediatamente.
Crie seus próprios atalhos
Basta utilizar o atalho de adição de atalho. Um som será reproduzido e você poderá navegar com Tab ou Shift + Tab para focar um elemento na página e então pressionar a combinação de teclas que será o atalho para o elemento em foco.
Por padrão, o atalho para adicionar um novo atalho é o “Alt + Control + Shift + A” no Windows e “Command + Option + Shift + A” no Mac.
Após executar esse atalho, escolha o elemento navegando com Tab ou Shift + Tab e depois faça a combinação desejada para o elemento em foco, como por exemplo “Alt + j”. Uma caixa de confirmação será exibida: ative o botão “Ok” para confirmar ou “Cancelar” para que o atalho não seja criado.
Resumo da página com IA
Para obter um resumo inteligente da página atual, utilize o atalho “Alt + Control + Shift + R” no Windows e “Command + Option + Shift + R” no Mac.
A extensão analisará o conteúdo e exibirá um resumo interativo: se houver um formulário ou botão importante, o link no resumo terá o sufixo “(focar na página)” e, ao ser ativado, levará o foco do leitor de telas direto para o elemento. Se for um link externo, ele indicará “(abrirá em nova aba)”. Você também encontrará o botão “Gerar novo resumo” caso queira atualizar as informações.
Descreva uma imagem
Para descrever uma imagem, utilize o atalho padrão “Alt + Control + Shift + D” no Windows e “Command + Option + Shift + D” no Mac. Selecione uma imagem no seu computador e ative o botão “Descrever imagem”. Também é possível utilizar o botão “Descrever imagem da área de transferência” para obter a descrição de um print ou imagem copiada (por exemplo, do WhatsApp Web).
Chat com a IA
Após gerar um resumo ou descrever uma imagem, você pode tirar dúvidas específicas sobre o conteúdo. No final da janela de resumo ou da descrição de imagens, haverá um campo de edição para “Perguntar algo sobre a página ou sobre a imagem”. Escreva sua dúvida e pressione Enter ou ative o botão “Perguntar”. A resposta da IA aparecerá logo abaixo da sua pergunta e será lida automaticamente pelo seu leitor de telas. Você pode continuar a conversa enquanto o modal estiver aberto.
Página de configurações
O atalho padrão para acessar a página de configurações é o “Alt + Control + Shift + C” no Windows e “Command + Option + Shift + C” no Mac. Ao executá-lo, a página da extensão será aberta e você poderá verificar e gerenciar todos os atalhos criados, gerenciar os padrões e configurar sua Chave API do Gemini para utilizar os recursos de IA.
Configuração do Gemini
Para usar os recursos de Inteligência Artificial gratuitamente e com total privacidade, siga os passos a seguir para obter sua chave de acesso exclusiva:
- Acesse o site oficial do Google AI Studio: https://aistudio.google.com/api-keys (abrirá em nova aba)
- Clique no botão para criar uma nova chave de API (Get API Key) no plano gratuito.
- Copie a chave gerada, cole no campo de texto correspondente da página de configuração da extensão e clique no botão Salvar Chave.
Gerenciando atalhos
Atalhos criados
Na página de configurações, sob o título de “Atalhos criados”, você encontrará uma tabela com todas as suas combinações. Na coluna “Ação”, você poderá ativar o botão “Excluir” para apagar o atalho correspondente.
Atalhos padrão
Sob o título “Atalhos padrão”, você pode editar as combinações da própria extensão (como o atalho de resumo ou o de adicionar novos itens). Ao ativar o botão “Editar” na coluna “Ação”, um som será reproduzido e você deverá pressionar a nova combinação de teclas desejada. Uma caixa de confirmação será exibida antes da nova combinação ser registrada.
Exportar e importar atalhos
Você pode salvar seus atalhos personalizados para usar em outro navegador ou fazer um backup de segurança na página de configurações:
- Exportar atalhos: Ative o botão “Exportar atalhos” para baixar um arquivo com extensão “.as” contendo todas as suas combinações criadas.
- Importar e acrescentar atalhos: Ative este botão para selecionar um arquivo “.as” previamente salvo. A extensão irá adicionar os novos atalhos à sua lista atual, sem apagar os que você já tem.
Outras informações
Se inscreva no canal @ContinueDesenvolvendo no Youtube para se manter informado sobre atualizações e acesse o site oficial.
Uso da extensão Atalhos Acessíveis
Ao utilizar a extensão Atalhos Acessíveis, você declara estar de acordo com a Política de privacidade da extensão Atalhos Acessíveis.
With this extension, you will be able to create shortcuts in an accessible way to focus elements on a web page, in addition to using artificial intelligence to describe images, generate smart page summaries, and clear up doubts in real-time through an interactive chat.
IMPORTANT NOTE ABOUT ARTIFICIAL INTELLIGENCE: To use the AI features (Summaries, Image Description, and Chat), the extension uses the "Bring Your Own Key" (BYOK) model. This means you can insert your own free Gemini API key (easily generated in Google AI Studio). This approach ensures you have your own exclusive usage quota, with no ads, no shared limits, and complete data privacy.
Note: Key combinations such as “Control + Alt” refer to the individual Control and Alt keys pressed together, not the combined “Ctrl+Alt” key (located to the right of the spacebar).
How to use
First install the Accessible Shortcuts extension in your browser:
Accessible Shortcuts for Google Chrome (Opens in new tab)
Accessible Shortcuts for Mozilla Firefox (opens in new tab)
After installation, you will be able to use the available features.
Demo video
Accessible Shortcuts Menu
Now, the extension features a dedicated menu called "Accessible Shortcuts", which can be accessed by right-clicking anywhere on the page or using the "Applications" key (or Shift + F10) on your keyboard. Inside this menu, you will find all the main features and default shortcuts of the extension, which significantly improves quick access to options without the need to memorize all key combinations immediately.
Create your own shortcuts
Just use the “add shortcut” command. A sound will play, and you can navigate with Tab or Shift + Tab to focus an element on the page, then press the key combination that will become the shortcut.
By default, the shortcut to add a new shortcut is “Alt + Control + Shift + A” on Windows and “Command + Option + Shift + A” on Mac.
After executing this command, choose the element by navigating with Tab or Shift + Tab and then perform the desired combination for the element in focus, such as “Alt + J”. A confirmation box will be displayed: activate the “Ok” button to confirm or “Cancel” so the shortcut is not created.
AI Page Summary
To get a smart summary of the current page, use the shortcut “Alt + Control + Shift + R” on Windows and “Command + Option + Shift + R” on Mac.
The extension will analyze the content and display an interactive summary: if there is an important form or button, the link in the summary will have the suffix “(focus on page)” and, when activated, will move the screen reader’s focus directly to the element. If it is an external link, it will indicate “(will open in a new tab)”. You will also find a “Generate new summary” button if you want to update the information.
Describe an Image
To describe an image, use the shortcut “Alt + Control + Shift + D” on Windows and “Command + Option + Shift + D” on Mac. Select an image on your computer and activate the “Describe image” button. You can also use the “Describe clipboard image” button to get a description of a screenshot or copied image (for example, from WhatsApp Web).
AI Chat
After generating a summary or describing an image, you can ask specific questions about the content. At the end of the summary or image description window, there will be an edit field to “Ask something about the page or the image”. Type your question and press Enter or activate the “Ask” button. The AI’s response will appear right below your question and will be automatically read by your screen reader. You can continue the conversation as long as the modal is open.
Settings page
The default shortcut to access settings is “Alt + Control + Shift + C” on Windows and “Command + Option + Shift + C” on Mac. When you run it, the extension page will open and you can check and manage all created and default shortcuts, and configure your Gemini API Key.
Gemini Configuration
To use the Artificial Intelligence features for free and with complete privacy, follow the steps below to get your exclusive access key:
- Access the official Google AI Studio website: https://aistudio.google.com/api-keys (will open in a new tab)
- Click on the button to create a new API key (Get API Key) on the free plan.
- Copy the generated key, paste it into the corresponding text input field on the extension’s settings page, and click the Save Key button.
Managing shortcuts
Created shortcuts
On the settings page, find the “Created shortcuts” heading. If you have created a shortcut, there will be a table containing all those that have been added. In the “Action” column, you can activate the “Delete” button to delete the corresponding shortcut.
Default shortcuts
Under the heading “Default shortcuts,” you can edit the extension’s own combinations (such as the summary shortcut or the add shortcut). When you activate the “Edit” button in the “Action” column, a sound will play and you must press the new desired combination. A confirmation box will be displayed before the new key combination is registered.
Export and import shortcuts
You can save your custom shortcuts to use in another browser or for backup on the settings page:
- Export shortcuts: Activate the “Export shortcuts” button to download a “.as” file containing all your created combinations.
- Import and add shortcuts: Activate this button to select a previously saved “.as” file. The extension will add the new shortcuts to your current list without deleting the existing ones.
Other information
Subscribe to the channel Continue Desenvolvendo (Keep Developing) on Youtube to stay informed about any updates and access the official website.
Using the Accessible Shortcuts extension
By using the Accessible Shortcuts extension, you declare that you agree with the Extension privacy policy Accessible Shortcuts.
Add-on Notas Virtuais (Virtual Notes For NVDA)
Uma solução elegante para um problema extremamente recorrente enfrentado por palestrantes, professores e profissionais com deficiência visual: a falta de privacidade e a complexidade na hora de consultar anotações ou ler roteiros durante reuniões online, aulas virtuais ou apresentações utilizando leitores de tela.
O Desafio das Apresentações Acessíveis
Imagine estar em uma reunião executiva importante, precisando compartilhar sua tela para apresentar um projeto complexo, e necessitar, em simultâneo, de consultar anotações e tópicos-guia.
Alternar telas e janelas no computador de forma dinâmica no meio da fala é um processo extremamente disruptivo e que expõe suas anotações pessoais aos outros participantes. Consultar anotações no celular obriga a dividir o foco físico e mental constantemente, prejudicando a fluidez da fala e a autoconfiança.
A Solução: Notas Virtuais para o NVDA
Este add-on transforma seus arquivos de notas e roteiros em **notas virtuais e flutuantes**, totalmente acessíveis ao seu leitor de telas de forma interna. Esqueça o incômodo de alternar entre abas ou de reler suas anotações linha por linha. Tenha confiança e fluidez total nas suas apresentações!
Como Obter e Instalar
Recomendo fortemente realizar a instalação diretamente através da **Loja de Complementos Oficial do NVDA**, garantindo o recebimento de atualizações e correções de segurança automáticas.
Caso prefira realizar o download manual do arquivo empacotado para instalação direta no software NVDA, utilize o link seguro abaixo:
Segurança e Leveza
O complemento foi programado respeitando a arquitetura leve e nativa do NVDA. O arquivo possui apenas **12 KB**, é livre de anúncios e consome zero de processamento adicional no sistema.
Depoimentos de Alunos e Usuários
A maior satisfação é presenciar a transformação digital e a autonomia alcançada pelos alunos. Confira os relatos de quem já concluiu nossos cursos ou utiliza as ferramentas:
Entre em Contato
Tem dúvidas sobre os cursos, deseja propor palestras corporativas de acessibilidade digital ou necessita de consultorias especializadas? Preencha o formulário abaixo:
Redes Sociais
Conecte-se comigo e acompanhe minhas postagens, dicas diárias de código e transmissões de acessibilidade:
Compromisso de Acessibilidade
Este portal foi construído em conformidade com as diretrizes da **WCAG 2.2 de nível AAA**. Caso você encontre algum obstáculo visual, motor ou de navegação usando qualquer leitor de tela (NVDA, JAWS, VoiceOver ou TalkBack), me mande uma mensagem! Seu feedback ajuda a tornar a web cada vez mais aberta.