• Pular para navegação primária
  • Skip to main content
  • Home
  • Sobre/About
  • Projetos
  • Blog

Celso Bessa (sɛwsʊ bɛ:sa)

Prefiro construir pontes a muros

acessibilidade

Desenvolvedores: parem de sequestrar os atalhos / funções do navegador e do sistema

16 fevereiro, 2021 por Celso Bessa

Por exemplo, quando um usuário digita CMD+F / CTRL + F, ele quer buscar na página ou no documento que está navegando naquele momento, não buscar na biblioteca de documentos. E se você insistir em sequestrar, por favor: i) avise de forma bem explícita que fez isto ii) ofereça uma opção para desligar o sequestro de função.

Arquivado em: blog Marcados com as tags: acessibilidade, desenvolvimento

ComicA11y: Um experimento de quadrinhos web acessível e inclusivo

22 setembro, 2020 por Celso Bessa

Isso é tão legal. Um experimento de biblioteca de quadrinhos acessível usando tecnologia básica da web.

Páginas da web com quadrinhos com legendas. Os personagens são destacados e as descrições aparecem abaixo.
Páginas da web com quadrinhos com legendas. Os personagens são destacados e as descrições aparecem abaixo.

Criado por Paul Spencer, além do formato de roteiro de quadrinhos mais “padrão”, permite navegar por meio da tecla TAB, ler por meio de leitores de tela, modo de alto contraste, mudar a tira para orientação vertical, traduções, seleção de texto e legenda (closed caption).

Arquivado em: tecnologia Marcados com as tags: acessibilidade, desenvolvimento, história em quadrinhos, quadrinhos

Adding a noscript element to WordPress scripts using the script_loader_tag filter

3 outubro, 2017 por Celso Bessa

A good practice for developing websites and webapps is to give alternatives for features that depend on Javascript. Something known as progressive enhancement.

[Versão em Português? Clique aqui.]

Ideally, you start from the basic experience without Javascript and progressivelly enhances the experience with new Javascript features. At least, you should give some kind of warning or alternative content to the user (or search engines) if you can’t provide the same experience.

One way of doing that is by using noscript elements with the description, the warning or an alternative feature. Say, for example, an static image instead of some kind of interactive graphic.

Unfortunately, so far, WordPress doesn’t have a native specific way to add noscript elements to any Javascript enqueued with the native wp_register_script/wp_enqueue_script functionsw

The good news is that you can solve that by using a WordPress filter. Specifically, by using the script_loader_tag, as you can see below.

/**
 * @summary        filters an enqueued script tag and adds a noscript element after it
 * 
 * @description    filters an enqueued script tag (identified by the $handle variable) and
 *                 adds a noscript element after it. If there is also an inline script enqueued
 *                 after $handled, adds the noscript element after it.
 * 
 * @access    public
 * @param     string    $tag       The tag string sent by `script_loader_tag` filter on WP_Scripts::do_item
 * @param     string    $handle    The script handle as sent by `script_loader_tag` filter on WP_Scripts::do_item
 * @param     string    $src       The script src as sent by `script_loader_tag` filter on WP_Scripts::do_item
 * @return    string    $tag       The filter $tag variable with the noscript element
 */
function add_noscript_filter($tag, $handle, $src){
    // as this filter will run for every enqueued script
    // we need to check if the handle is equals the script
    // we want to filter. If yes, than adds the noscript element
    if ( 'script-handle' === $handle ){
        $noscript = '<noscript>';
        // you could get the inner content from other function
        $noscript .= '
 
this site demands javascript
 
';
        $noscript .= '</noscript>'; $tag = $tag . $noscript; } return $tag; } // adds the add_noscript_filter function to the script_loader_tag filters // it must use 3 as the last parameter to make $tag, $handle, $src available // to the filter function add_filter('script_loader_tag', 'add_noscript_filter', 10, 3);

/** * @summary filters an enqueued script tag and adds a noscript element after it * * @description filters an enqueued script tag (identified by the $handle variable) and * adds a noscript element after it. If there is also an inline script enqueued * after $handled, adds the noscript element after it. * * @access public * @param string $tag The tag string sent by `script_loader_tag` filter on WP_Scripts::do_item * @param string $handle The script handle as sent by `script_loader_tag` filter on WP_Scripts::do_item * @param string $src The script src as sent by `script_loader_tag` filter on WP_Scripts::do_item * @return string $tag The filter $tag variable with the noscript element */ function add_noscript_filter($tag, $handle, $src){ // as this filter will run for every enqueued script // we need to check if the handle is equals the script // we want to filter. If yes, than adds the noscript element if ( 'script-handle' === $handle ){ $noscript = '<noscript>'; // you could get the inner content from other function $noscript .= ' this site demands javascript '; $noscript .= '</noscript>'; $tag = $tag . $noscript; } return $tag; } // adds the add_noscript_filter function to the script_loader_tag filters // it must use 3 as the last parameter to make $tag, $handle, $src available // to the filter function add_filter('script_loader_tag', 'add_noscript_filter', 10, 3);

Enjoy! This function is also available on Github.

Arquivado em: tecnologia Marcados com as tags: acessibilidade, desenvolvimento, development, filters, filtros, github, HTML, noscript, PHP, progressive enhancement, script_loader_tag, WordPress

Adicionando elementos noscript a scripts do WordPress usando o filtro script_loader_tag

3 outubro, 2017 por Celso Bessa

Uma boa prática em desenvolvimento de sites e webapps é oferecer alternativas para funcionalidades que dependam de Javascript. Conhecido como progressive enhancement ou aperfeiçoamento progressivo.

[for english version, check this link]

Idealmente, você começa da experiência mais básica, sem Javascript, e progressivamente aperfeiçoa a experiência com nova funcionalidades. Ou ao menos, adicionar avisos e conteúdos que possam ser visto por usuários e robôs de busca sem Javascript.

Uma das formas é colocar elementos noscript com descrição ou alternativa da funcionalidade, ou o aviso para o usuário. Infelizmente, o WordPress — o sistema de gerenciamento de conteúdo que usamos em clientes e projetos de clientes 2Aces — não oferece uma função específica para adicionar este elementos noscript.

A boa notícia é que é possível resolver isto usando o ótimo sistema de filtros do WordPress. Neste caso usando o filtro script_loader_tag, como você pode ver abaixo.

/**
 * @summary        filtra uma tag de script na fila e adiciona um elemento noscript após ela
 * 
 * @description    filtra uma tag de script na fila (identificada pela variável $handle) e adiciona
 *                 um elemento noscript após ela. Se também houver um script inline após o script
 *                 identificado por $handle, adiciona o elemento noscript após ele.
 * 
 * @access    público
 * @param     string    $tag       A string da tag enviada pelo filtro `script_loader_tag` em WP_Scripts::do_item
 * @param     string    $handle    O nome (handle) do como enviado pelo filtro `script_loader_tag` em WP_Scripts::do_item
 * @param     string    $src       A origem (src) do script como enviado pelo filtro `script_loader_tag` em WP_Scripts::do_item
 * @return    string    $tag       A variável $tag filtrada e com o elemento `noscript`
 */
function add_noscript_filter($tag, $handle, $src){
    // como este filtro roda para cada script na fila
    // precisamos verificar se o $handle é igual o script
    // que queremos filtrar e adicionar o noscript a ele
    if ( 'script-handle' === $handle ){
        $noscript = '<noscript>';
        // você poderia pegar o conteúdo interno de outra função
        $noscript .= '
 
Este site demanda JavaScript
 
';
        $noscript .= '</noscript>'; $tag = $tag . $noscript; } return $tag; } // adiciona a função add_noscript_filter aos filtros em script_loader_tag // deve ysar 3 no último parmetro para garantirque $tag, $handle, $src // estejam disponíveis à funço add_noscript_filter add_filter('script_loader_tag', 'add_noscript_filter', 10, 3);

/** * @summary filtra uma tag de script na fila e adiciona um elemento noscript após ela * * @description filtra uma tag de script na fila (identificada pela variável $handle) e adiciona * um elemento noscript após ela. Se também houver um script inline após o script * identificado por $handle, adiciona o elemento noscript após ele. * * @access público * @param string $tag A string da tag enviada pelo filtro `script_loader_tag` em WP_Scripts::do_item * @param string $handle O nome (handle) do como enviado pelo filtro `script_loader_tag` em WP_Scripts::do_item * @param string $src A origem (src) do script como enviado pelo filtro `script_loader_tag` em WP_Scripts::do_item * @return string $tag A variável $tag filtrada e com o elemento `noscript` */ function add_noscript_filter($tag, $handle, $src){ // como este filtro roda para cada script na fila // precisamos verificar se o $handle é igual o script // que queremos filtrar e adicionar o noscript a ele if ( 'script-handle' === $handle ){ $noscript = '<noscript>'; // você poderia pegar o conteúdo interno de outra função $noscript .= ' Este site demanda JavaScript '; $noscript .= '</noscript>'; $tag = $tag . $noscript; } return $tag; } // adiciona a função add_noscript_filter aos filtros em script_loader_tag // deve ysar 3 no último parmetro para garantirque $tag, $handle, $src // estejam disponíveis à funço add_noscript_filter add_filter('script_loader_tag', 'add_noscript_filter', 10, 3);

Aproveite! A função acima também está disponível no Github.

Arquivado em: tecnologia Marcados com as tags: acessibilidade, desenvolvimento, development, filters, filtros, github, HTML, noscript, PHP, progressive enhancement, script_loader_tag, WordPress

Vídeos da Conferência Web.br 2015: Re-descentralização da Web

16 outubro, 2015 por Celso Bessa

Acabou de chegar no email: já estão disponíveis vários vídeos da Conferência Web.br 2015 de Setembro, que teve o tema Re-descentralização da Web, organizada pelo W3C Brasil e CEWEB.br. Não são todas as que estão no canal ainda, mas recomendo que assistam, seja você um profissional técnico da web ou um cidadão preocupado com o futuro da web e o impacto na sociedade (em especial privacidade e liberdade) no presente e no futuro próximo.

Reinaldo Ferraz e Leda Spelta, duas das figuras mais importantes para a #acessibilidade na web brasileira.
Preparativos do #keynote de Lêda Spelta na conferência #webbr2015 “Universalidade: O acesso à Internet deve ser universal para que ela seja um meio para o desenvolvimento social e humano” (Lêda Spelta)

Foram dois dias de palestras e debates ligados o tema central (dados abertos, transparência, acessibilidade, padrões e práticas de tecnologia, etc). E muitas delas lidam mais com política, economia e as relações sociais do que com tecnologia.

Aliás, das palestras que mais gostei de assistir durante o evento, 3 delas tocavam esta faceta sociopolítica. Afinal, a tecnologia é apenas uma ferramenta e são os usos e propósito no uso da ferramenta que importam.

“Tecnologia à parte, também precisamos nos preocupar com regulações e regras. O problema aqui é que são grupos poderosos que vão decidir quem tem acesso à privacidade e segurança e quem não. E o próximo bilhão de usuários da web não terão uma carta de direitos, uma magna carta, eles não vão ter as leis e regulamentos para protegê-los. Então como podemos ajudá-los, como podemos garantir que a web continue aberta e amigável à privacidade para todos”.
(Andrei Sambra)

Recomendo em especial a conversa de abertura sobre descentralização e as relações de poder com Andrei Sambra (primeira abaixo) e a Dados na Web com Phil Archer (um excelente debatedor) e Deirdre Lee (a segunda abaixo e número 13 da lista no YouTube) que, apesar de abordar mais assuntos técnicos, analisam alguns bons usos sociais e comerciais de dados abertos na web que podem inspirar novas ferramentas e serviços, aumentar a transparência governamental e dificultar corrupção.

PS: As fotos que fiz do evento são disponíveis em Creative Commons, mas para usá-las, é preciso autorização de uso de imagem das pessoas nas imagens

Auditório da Conferência Web.br 2015: Re-descentralização da Web
Auditório da Conferência Web.br 2015: Re-descentralização da Web

Sunil Abraham gesticulando ao se dirigir à plateia
Sunil Abraham em palestra sobre acessibilidade e os desafios sóciopolíticos e econômicos na Índia.


Arquivado em: sociedade Marcados com as tags: acessibilidade, Andrei Sambra, Apple, Conferência, Conferência Web.br 2015, corrupção, dados, dados abertos, direitos civis, facebook, geopolítica, Internet, Phil Archer, política, privacidade, segurança, sociedade, tecnologia, transparência, W3C, W3C Brasil, web

Doando máquinas de escrever para ajudar quem sofreu AVC. Bora?

30 setembro, 2015 por Celso Bessa

Gente, alguém tem uma máquina de escrever como a do link e fotos abaixo (uma Olivetti Lettera 35) para doação por um bom motivo? Vem comigo:

Uma senhora ligou para mim interessada na máquina de escrever igual da foto e link abaixo para dar para seu irmão, que sofreu um AVC há alguns anos, escrever com a mão esquerda.

O link é de uma lojinha que fiz anos atrás para vender uns cacarecos da minha mãe, mas ela já vendeu todas as máquinas de escrever. Fiquei muito comovido com a história, especialmente por quê o meu avô — pai de minha mãe — sofreu um AVC nos anos 1980 e foi algo muito triste.

E aí que resolvi ver se descolo esta máquina para dar para esta senhora. Se você tiver e puder doar, ou souber de alguém que tenha, ou onde encontro baratinho (a coisa tá preta aqui) dá uma forcinha e me avise por email: celso@celsobessa.com.br

Algumas observações:

  • não precisa ser exatamente este modelo, mas tem que ser portátil e de tecla leve para ele poder escrever.
  • cheguei a pensar em algo mais tecnológico, mas a máquina pode ser uma solução viável pois: 1) é barata (um tablet com eye-tracking e software especiais é muito caro, cerca de R$ 75.000) 2) não podemos depender de energia 3) não pode ser algo de manutenção cara (o que me leva a pensar que talvez precisemos de 2 máquinas)
  • claro, outras soluções para o problema são mais que bem-vindas

Vista diagonal superio: Máquina de escrever portátil Letter 35 em capa de couro com mala aberta,
Vista diagonal superio: Máquina de escrever portátil Letter 35 em capa de couro com mala aberta,

Vista do alto: Máquina de escrever portátil Letter 35 em capa de couro com mala aberta
Máquina de escrever portátil Letter 35 em capa de couro com mala aberta,

Detalhes da Máquina de escrever portátil Letter 35 em capa de couro
Detalhes da Máquina de escrever portátil Letter 35 em capa de couro

Arquivado em: tecnologia Marcados com as tags: acessibilidade, AVS, doação, máquina de escrever, saúde, tecnologia

  • Go to page 1
  • Go to page 2
  • Go to Next Page »

Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International (exceto fotografias com produto de terceiros ou pessoas)
Otimizado pela WoWPerations e hospedado na Digital Ocean
(Assinando Digital Ocean através deste link do programa indicação, você ganha crédito de 100 dólares para serem utilizados em até 60 dias, e eu ganho uma pequena comissão)