私が私のCSSコードについて後悔するその1つのもの

ハイテク世界は途方もなく速い方法で進化します、そして、それはデザイン傾向をします.チームが美しいアプリケーションを提供するために一生懸命働いているとき、彼らは期待が現実を満たしていることを確認しています.
その一方で、エンジニアはこの記事のトピックのようなデフォルトのブラウザの動作で動作しなければなりません.outline .
偉大なユーザーエクスペリエンスを提供しようとすると、気が散るし、詳細に細心の注意を払って開始し、なぜこれらのデフォルトの要素が最初に実装されて実現しないように簡単です.
私はこのエンジニアであり、この記事の目的はアクセシビリティの周りの意識を高めることでありoutline それはあなたのアプリケーションのルックアンドフィールに合わない場合でも、あなたのプロジェクトのために.

何がoutline ?
名前が示すようにoutline はHTML要素の周囲の行です.
最初の観察は、Aにかなり近く感じますborder しかし、一般的には技術的側面や考え方にはいくつかの重要な違いがあります.
The outline 要素がフォーカスされていない場合は表示されません.このプロパティの背後にあるアイデアは、コンポーネントは、キーボードを使用して、アプリケーションを介してナビゲートするか視覚障害を持っている人々に焦点を当てることができることを示すことです.
アウトラインとボーダーの技術的な違いはいくつかあります.

あなたは、outline . 単体として動く

outline 他の要素やレイアウトには影響しません

詳細については、MDN spec about the outline .

なぜアウトライン滞在するか?
アウトラインは非常にシンプルな外観を持っており、近代的なミニマリズムデザインの概念のほとんどフィットしません.だからこそ、エンジニアは、それを隠すために、その要素がクリック可能であるという指示を維持するために、一連のスタイルを書いていることがわかります.

.my-fancy-looking-button {
    outline: none; /* Hide the outline */
    cursor: pointer; /* Add the pointing cursor when hovering the element */
}

最初の観察から、それは有効な解決策のように感じるかもしれません、しかし、現実はそれでないということです.
アウトラインを隠すとき、あなたはあなたのアプリケーションのアクセシビリティが最悪になります.

アクセシビリティ問題
ユーザーのさまざまなグループがどのように自分のウェブサイトをナビゲートすることができます理解するためにアウトラインが必要です.
私たちは皆、異なっていると良いプロジェクトを誰もがアクセスできるように目指してください.私の正直な意見では、アクセシビリティに大きな注意を払っているプロジェクトは、特定のユーザーグループにとって便利な最小限のクリーンなアプリケーションよりも優れています.
私は意図的に“最高のために偉大なデザインを犠牲に”という言葉を使用しなかったので、アプリケーションをよりアクセス可能にすることは犠牲ではありません.
人々についての思いやりは、否定的な面であるべきではありません!

キーボードナビゲーション問題
多くのユーザーがすぐにウェブサイトをナビゲートすることを好む.アウトラインはそれに役立つ素晴らしい機能です.
クリエイターは、アプリケーションが美しく見えますが、悲しいことに、特定のプロジェクトがどのようにいくつかの問題を迅速かつ便利に解決するのに役立ちます.
ここでは、タブキーを使用してナビゲーションを示すGIFを見つけることができます.


あなたはまだアウトラインを削除したい場合はどうですか?
私は、これがオプションであるべきではないと信じています、しかし、あなたがまだアウトラインを削除すると決めるならば、アクセスできる方法がそこにあります.
Steve Faulkner's article は、アウトラインを削除し、アプリケーションをアクセスできるようにします.
サードパーティライブラリをアプリケーションに追加する準備が整いました.その場合は、remove-focus-outline リンゼーエヴァンズによって作成された.

結論
このトピックは新しいものではありません.また、アプリケーションが異なるユーザのためにアクセス可能であるために必要とされない場合、私はうれしいです.悲しいことに私はまだ優れたデザインのアクセシビリティを犠牲にエンジニアを見ることができます.そういうわけで、より多くのユーザーが役に立つとわかるのを助けることができるプロジェクトを構築するのを援助することができる話題に、若干の注意を与えることに決めました.
私はこの特定のポイントに注意を払っていないエンジニアであり、うまくいけば、この記事は、より多くの人々がアプリケーションを改善するのに役立つことができます.
偉大な仕事を続けて、調整滞在!