initial commit

2 files changed, 297 insertions, 0 deletions

diff --git a/files/pt-pt/web/accessibility/aria/aria_techniques/index.html b/files/pt-pt/web/accessibility/aria/aria_techniques/index.html
new file mode 100644
index 0000000000..34fa824f8c
--- /dev/null
+++ b/files/pt-pt/web/accessibility/aria/aria_techniques/index.html
@@ -0,0 +1,215 @@
+---
+title: 'Using ARIA: Roles, states, and properties'
+slug: Web/Accessibility/ARIA/ARIA_Techniques
+tags:
+  - ARIA
+  - Accessibility
+  - NeedsTranslation
+  - Overview
+  - Reference
+  - TopicStub
+translation_of: Web/Accessibility/ARIA/ARIA_Techniques
+---
+<p class="summary">ARIA defines semantics that can be applied to elements, with these divided into <strong>roles</strong> (defining a type of user interface element) and <strong>states</strong> and <strong>properties</strong> that are supported by a role. Authors must assign an ARIA role and the appropriate states and properties to an element during its life-cycle, unless the element already has appropriate ARIA semantics (via use of an appropriate HTML element). Addition of ARIA semantics only exposes extra information to a browser's accessibility API, and does not affect a page's DOM.</p>
+
+<h2 id="Roles">Roles</h2>
+
+<h3 id="Widget_roles">Widget roles</h3>
+
+<div class="index">
+<ul>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/button_role" title="Using the button role">button</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/checkbox_role" title="Using the checkbox role">checkbox</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Gridcell_Role">gridcell</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_link_role" title="Using the Link role">link</a></li>
+ <li>menuitem</li>
+ <li>menuitemcheckbox </li>
+ <li>menuitemradio</li>
+ <li>option</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role" title="en/ARIA/ARIA_Techniques/Using_the_progressbar_role">progressbar</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role" title="en/ARIA/ARIA_Techniques/Using_the_radio_role">radio</a></li>
+ <li>scrollbar</li>
+ <li>searchbox</li>
+ <li>separator (when focusable)</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role" title="en/ARIA/ARIA_Techniques/Using_the_slider_role">slider</a></li>
+ <li>spinbutton</li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Switch_role">switch</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role">tab</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tabpanel_Role">tabpanel</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_textbox_role" title="en/ARIA/ARIA_Techniques/Using_the_textbox_role">textbox</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Treeitem_Role">treeitem</a></li>
+</ul>
+</div>
+
+<h3 id="Composite_roles">Composite roles</h3>
+
+<p>The techniques below describe each composite role as well as their required and optional child roles.</p>
+
+<div class="index">
+<ul>
+ <li>combobox</li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Grid_Role">grid</a> (including <a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Row_Role">row</a>, <a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Gridcell_Role">gridcell</a>, rowheader, columnheader roles)</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role" title="en/ARIA/ARIA_Techniques/Using_the_listbox_role">listbox</a> (including option role)</li>
+ <li>menu</li>
+ <li>menubar</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role" title="en/ARIA/ARIA_Techniques/Using_the_radio_role">radiogroup (see radio role)</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tablist_Role">tablist</a> (including <a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role">tab</a> and <a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tabpanel_Role">tabpanel</a> roles)</li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tree_Role">tree</a></li>
+ <li>treegrid</li>
+</ul>
+</div>
+
+<h3 id="Document_structure_roles">Document structure roles</h3>
+
+<div class="index">
+<ul>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Application_Role">application</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Article_Role" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_article_role">article</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Cell_Role">cell</a></li>
+ <li>columnheader</li>
+ <li>definition</li>
+ <li>directory</li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Document_Role">document</a></li>
+ <li>feed</li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Figure_Role">figure</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_group_role" title="en/ARIA/ARIA_Techniques/Using_the_group_role">group</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/heading_role">heading</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Role_Img">img</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/List_role">list</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Listitem_role">listitem</a></li>
+ <li>math</li>
+ <li>none</li>
+ <li>note</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role" title="en/ARIA/ARIA_Techniques/Using_the_presentation_role">presentation</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Row_Role">row</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Rowgroup_Role">rowgroup</a></li>
+ <li>rowheader</li>
+ <li>separator</li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Table_Role">table</a></li>
+ <li>term</li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/textbox_role">textbox</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_toolbar_role" title="en/ARIA/ARIA_Techniques/Using_the_toolbar_role">toolbar</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tooltip_Role">tooltip</a></li>
+</ul>
+</div>
+
+<h3 id="Landmark_roles">Landmark roles</h3>
+
+<div class="index">
+<ul>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_banner_role" title="en/ARIA/ARIA_Techniques/Using_the_banner_role">banner</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Complementary_role">complementary</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Contentinfo_role">contentinfo</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Form_Role">form</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Main_role">main</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Navigation_Role">navigation</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Region_role">region</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Search_role">search</a></li>
+</ul>
+</div>
+
+<h3 id="Live_Region_Roles">Live Region Roles</h3>
+
+<div class="index">
+<ul>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Alert_Role">alert</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_log_role" title="Using the Log role">log</a></li>
+ <li>marquee</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_status_role" title="Using the link role">status</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/ARIA_timer_role">timer</a></li>
+</ul>
+</div>
+
+<h3 id="Window_Roles">Window Roles</h3>
+
+<div class="index">
+<ul>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role">alertdialog</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role">dialog</a></li>
+</ul>
+</div>
+
+<h2 id="States_and_properties">States and properties</h2>
+
+<h3 id="Widget_attributes">Widget attributes</h3>
+
+<div class="index">
+<ul>
+ <li>aria-autocomplete</li>
+ <li>aria-checked</li>
+ <li>aria-current</li>
+ <li>aria-disabled</li>
+ <li>aria-errormessage</li>
+ <li>aria-expanded</li>
+ <li>aria-haspopup</li>
+ <li>aria-hidden</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute" title="Using the aria-invalid attribute">aria-invalid</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute" title="Using the aria-labelledby attribute">aria-label</a></li>
+ <li>aria-level</li>
+ <li>aria-modal</li>
+ <li>aria-multiline</li>
+ <li>aria-multiselectable</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientation_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientation_attribute">aria-orientation</a></li>
+ <li>aria-placeholder</li>
+ <li>aria-pressed</li>
+ <li>aria-readonly</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute" title="Using the aria-required property">aria-required</a></li>
+ <li>aria-selected</li>
+ <li>aria-sort</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute" title="Using the aria-required attribute">aria-valuemax</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute">aria-valuemin</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_attribute">aria-valuenow</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute">aria-valuetext</a></li>
+</ul>
+</div>
+
+<h3 id="Live_region_attributes">Live region attributes</h3>
+
+<div class="index">
+<ul>
+ <li>aria-live</li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute">aria-relevant</a></li>
+ <li>aria-atomic</li>
+ <li>aria-busy</li>
+</ul>
+</div>
+
+<h3 id="Drag_drop_attributes">Drag &amp; drop attributes</h3>
+
+<div class="index">
+<ul>
+ <li>aria-dropeffect</li>
+ <li>aria-dragged</li>
+</ul>
+</div>
+
+<h3 id="Relationship_attributes">Relationship attributes</h3>
+
+<div class="index">
+<ul>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-activedescendant_attribute" title="Role">aria-activedescendant</a></li>
+ <li>aria-colcount</li>
+ <li>aria-colindex</li>
+ <li>aria-colspan</li>
+ <li>aria-controls</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute" title="Using the aria-labelledby attribute">aria-describedby</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Annotations#Associating_annotated_elements_with_their_details">aria-details</a></li>
+ <li>aria-errormessage</li>
+ <li>aria-flowto</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute" title="en/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></li>
+ <li>aria-owns</li>
+ <li>aria-posinset</li>
+ <li>aria-rowcount</li>
+ <li>aria-rowindex</li>
+ <li>aria-rowspan</li>
+ <li>aria-setsize</li>
+</ul>
+</div>
+
+<h3 id="MicrosoftEdge-specific_properties">MicrosoftEdge-specific properties</h3>
+
+<div class="index">
+<ul>
+ <li><a href="/en-US/docs/Web/API/x-ms-aria-flowfrom">x-ms-aria-flowfrom</a> {{Non-standard_Inline}}</li>
+</ul>
+</div>
diff --git a/files/pt-pt/web/accessibility/aria/aria_techniques/usando_o_role_status/index.html b/files/pt-pt/web/accessibility/aria/aria_techniques/usando_o_role_status/index.html
new file mode 100644
index 0000000000..23374a0329
--- /dev/null
+++ b/files/pt-pt/web/accessibility/aria/aria_techniques/usando_o_role_status/index.html
@@ -0,0 +1,82 @@
+---
+title: Utilizar o role status
+slug: Web/Accessibility/ARIA/ARIA_Techniques/Usando_o_role_status
+tags:
+  - ARIA
+  - Acessibilidade
+  - RequerConteúdo
+translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_status_role
+---
+<h3 id="Descrição">Descrição</h3>
+
+<p class="p1">Esta técnica demonstra como usar o <em>role</em> <em><a class="external" href="https://www.w3.org/TR/wai-aria-1.1/#status">status</a>,</em> e descreve ainda o seu impacto em browsers e tecnologia assistiva.</p>
+
+<p class="p1">O <em>role</em> <em>status </em>é um tipo de <em><a class="external" href="http://www.w3.org/WAI/PF/aria/terms#def_liveregion">live region</a></em> para avisos que não são suficientemente importantes para constarem de um <em><a class="external" href="https://www.w3.org/TR/wai-aria-practices/#alert">alert</a>.</em> Tais avisos são normalmente apresentados como uma barra de estado. Quando o <em>role</em> é adicionado ao elemento, o <em>browser</em> envia um evento de estado para produtos de tecnologia assitiva, que por sua vez podem alertar o utilizador.</p>
+
+<p class="p1">Informação de <em>status</em> tem de ser fornecida num objeto de <em>status</em>, objeto este que não deve poder ser focado. Se outra parte da página controla o que aparece como <em>status</em>, deve-se utilizar o atributo <a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-controls">aria-controls</a> para relacionar essa parte da página com o objeto de <em>status</em>.</p>
+
+<p class="p1">Produtos de tecnologias assistiva podem reservar determinadas células de uma tela Braille para exibir o <em>status</em>.</p>
+
+<h3 id="Possível_impacto_em_user_agents_e_tecnologia_assistiva">Possível impacto em <em>user agents</em> e tecnologia assistiva </h3>
+
+<p class="p1">Quando o <em>role status </em>é adicionado a um elemento, ou quando esse elemento fica visível, o <em>user agent</em> deve:</p>
+
+<ul class="ul1">
+ <li class="li2">Expôr o elemento como tendo um <em>role</em> de <em>status</em> através da API de acessibilidade do sistema operativo. </li>
+ <li class="li2">Emitir um evento <em>status</em> acessível através da API de acessibilidade do sistema operativo, se possível.</li>
+</ul>
+
+<p class="p1">Produtos de tecnologia assistiva devem captar o evento de estado e notificar o utilizador adequadamente:</p>
+
+<ul class="ul1">
+ <li class="li2">Leitores de ecrã (<em>screen readers</em>) podem implementar uma tecla especial para anunciar o <em>status</em> atual, apresentando assim o conteúdo de uma <em>live region</em> de <em>status</em>. Estes devem ser anunciados apenas quando o utilizador está inativo, a menos que se tenha definido o atributo <em><span class="s1">aria-live=”assertive”</span></em><span class="s1">,</span> caso em que o utilizador pode ser interrompido. </li>
+ <li class="li2">Ampliadores de ecrã (<em>screen magnifiers</em>) poderão aumentar o tamanho do <em>status</em>.</li>
+</ul>
+
+<div class="note"><strong>Nota:</strong> Opiniões sobre como produtos de tecnologia assistiva lidam com esta técnica podem variar. A informação acima é apenas uma dessas opiniões, pelo que não pode ser considerada normativa.</div>
+
+<h3 id="Exemplos">Exemplos</h3>
+
+<h4 id="Exemplo_1_Adicionar_o_role_status_em_HTML">Exemplo 1: Adicionar o <em>role</em> <em>status</em> em HTML</h4>
+
+<p class="p1">O <em>snippet</em> em baixo mostra como se pode adicionar o <em>role </em>de <em>status</em> diretamente em código HTML. </p>
+
+<pre class="brush: html notranslate">&lt;p role="status"&gt;Your changes were automatically saved.&lt;/p&gt; </pre>
+
+<h4 id="Exemplos_a_Correr">Exemplos a Correr:</h4>
+
+<ul>
+</ul>
+
+<h3 id="Notas">Notas </h3>
+
+<h3 id="Atribuos_ARIA_utilizados">Atribuos ARIA utilizados</h3>
+
+<ul>
+ <li class="p1"><a class="external" href="https://www.w3.org/TR/wai-aria-1.1/#status">status</a></li>
+</ul>
+
+<h3 id="Técnicas_ARIA_relacionadas">Técnicas ARIA relacionadas </h3>
+
+<ul>
+ <li class="p1"><a class="external" href="https://www.w3.org/TR/wai-aria-practices/#alert">o <em>role alert</em></a></li>
+ <li class="p1"><a href="https://www.w3.org/TR/wai-aria-1.1/#live_region_roles"><em>Roles </em>de <em>Live Region</em></a></li>
+ <li class="p1"><a href="https://www.w3.org/TR/wai-aria-1.1/#attrs_liveregions">Atributos de <em>Live Region</em></a></li>
+</ul>
+
+<h3 id="Compatibilidade">Compatibilidade</h3>
+
+<ul>
+ <li class="comment">
+  <p>The Paciello Group publicou dados sobre da compatibilidade deste <em>role</em> num artigo de 2014: <em><a href="https://developer.paciellogroup.com/blog/2014/03/screen-reader-support-aria-live-regions/">Screen reader support for ARIA live regions</a></em></p>
+ </li>
+ <li class="comment">
+  <p>A determinar: Adicionar informação atualizada sobre combinações comuns de produtos de tecnologia assistiva com<em>user agents</em></p>
+ </li>
+</ul>
+
+<h3 id="Mais_recursos">Mais recursos</h3>
+
+<ul>
+ <li class="p1">Recomendações anteriores da <a href="https://www.w3.org/TR/wai-aria-1.1/#status">WAI-ARIA 1.0 (2014)</a> para o <em>role</em> <em>status</em></li>
+</ul>